<template>
  <div class="dm_userCenter__content--common dm_userCenter_address">
    <el-row>
      <el-col :span="20">
        <el-form
          :model="address"
          status-icon
          :rules="rules"
          ref="address"
          label-width="108px"
          size="small"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="收货人" prop="name">
                <el-input
                  v-model="address.name"
                  placeholder="请输入收货人"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="所在地区" prop="region">
                <Select @addr="getRegion" @reset_flag="getFlag" :reset_flag="reset_flag" :aForUpdate="aForUpdate"/>
                <!-- <el-input
                  v-model="address.region"
                  placeholder="请输入所在地区"
                ></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="详情地址" prop="detail">
                <el-input
                  v-model="address.detail"
                  placeholder="请输入详情地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系电话" prop="phone">
                <el-input
                  v-model="address.phone"
                  placeholder="请输入联系电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="设为默认地址" prop="isDefault">
                <el-radio-group v-model="address.isDefault">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="dm_userCenter__content--common__btn">
            <el-button
              style="width: 20%"
              size="small"
              @click="resetForm('address')"
              >清 空</el-button
            >
            <el-button
              type="primary"
              style="width: 20%"
              size="small"
              @click="submitForm('address')"
              >保 存</el-button
            >
          </div>
        </el-form>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      max-height="386"
      border
      style="width: 100%"
      row-key="id"
      size="small"
    >
      <el-table-column label="序号" type="index" width="72" align="center">
      </el-table-column>
      <el-table-column
        v-for="c in columns"
        :key="c.id"
        :prop="c.prop"
        :label="c.label"
        :width="c.width"
        align="center"
        :formatter="handle0And1"
      ></el-table-column>
      <el-table-column prop="operation" label="操作" width="165" align="center">
        <template slot-scope="scope">
          <div class="operation">
            <span @click="deleteAddressClick(scope.row.id)">删除</span>
            <span @click="updateAddressClick(scope.row)">修改</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getAllAddressData,
  getAddressData,
  postUpdateAddressData,
  postAddAddressData,
  postDeleteAddressData
} from "@/api/address";
import select from "@/components/userCenter/select.vue";
export default {
  data() {
    const validatortelephone = function(rule, value, callback) {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else if (!/^1\d{10}$/.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    return {
      reset_flag: 0,
      aForUpdate: "",
      address: {
        id: -1,
        name: null,
        region: null,
        detail: null,
        phone: null,
        isDefault: null
      },
      rules: {
        name: [{ required: true, message: "请输入收货人", trigger: "blur" }],
        // region: [
        //   { required: true, message: "请输入所在地区", trigger: "blur" }
        // ],
        detail: [
          { required: true, message: "请输入详情地址", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            validator: validatortelephone,
            trigger: ["blur", "change"]
          }
        ],
        isDefault: [
          { required: true, message: "请选择设为默认地址", trigger: "change" }
        ]
      },
      tableData: [],
      columns: [
        { id: 1, prop: "name", label: "收货人", width: 120 },
        { id: 2, prop: "region", label: "所在地区", width: 120 },
        { id: 3, prop: "detail", label: "详情地址" },
        { id: 4, prop: "phone", label: "联系电话", width: 120 },
        { id: 5, prop: "isDefault", label: "默认地址", width: 120 }
      ]
    };
  },
  mounted() {
    this.getAllAddressData();
  },
  methods: {
    //获取
    getFlag(data) {
      this.reset_flag = data;
    },
    //获取子组件的地区region，广东省，韶关市，浈江区，韶关学院
    getRegion(data) {
      this.address.region = data;
    },
    // 修改收货地址 - 操作
    updateAddressClick(row = {}) {
      row.isDefault = row.isDefault + "";
      this.address = row;
      this.aForUpdate = this.address.region + "," + this.address.detail.split(",")[0];
    },
    // 删除收货地址 - 操作
    deleteAddressClick(id) {
      this.$confirm("确认删除这条收货地址?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postDeleteAddressData(id);
        })
        .catch(() => {
          return;
        });
    },
    // 处理是 / 否
    handle0And1(row = {}, column = {}, cellValue, index) {
      let { isDefault } = row || {};
      if (column.property == "isDefault") {
        let obj = {
          "1"() {
            return "是";
          },
          "0"() {
            return "否";
          }
        };
        return obj[isDefault](); //isDefault && obj[isDefault]();
      }
      return cellValue;
    },
    // 清空
    resetForm(refName) {
      this.$refs[refName].resetFields();
      this.getAllAddressData();
      this.address = {
        id: -1,
        name: null,
        region: null,
        detail: null,
        phone: null,
        isDefault: null
      };
    },
    // 收货地址 - 表单校验
    submitForm(refName) {
      let { isDefault } = this.address;
      this.$refs[refName].validate(valid => {
        if (valid) {
          console.log(this.address);
          this.postEditAddressData({
            ...this.address,
            isDefault: Number(isDefault)
          });
          this.reset_flag = 1;
        } else {
          return false;
        }
      });

    },
    // 查询 - 收货地址
    async getAllAddressData() {
      const res = await getAllAddressData();
      try {
        if (res.code === 200) {
          // const { data = [] } = res || {};
          res.data.filter(item => {
            item.region = item.province + "," + item.city + "," + item.region + "," + item.detailAddress.split(",")[0];
            item.detail = item.detailAddress.split(",")[1];
            item.phone = item.phoneNumber;
            item.isDefault = item.defaultStatus;
          });
          this.tableData = res.data;
          // this.address = this.tableData[0];
          this.$refs["address"].resetFields();
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 添加/修改 - 收货地址
    async postEditAddressData(params = {}) {
      const addrList = params.region.split(",");
      //添加
      const data = {
        city: addrList[1],
        defaultStatus: params.isDefault,
        detailAddress: addrList[3] + "," + this.address.detail,
        name: params.name,
        phoneNumber: params.phone,
        province: addrList[0],
        region: addrList[2]
      };
      try {
        let res = null;
        console.log(params.id);
        if (params.id === -1) {
          res = await postAddAddressData(data);
        } else {
          data.id = params.id;
          res = await postUpdateAddressData(data);
        }
        if (res.code === 200) {
          this.$message({
            message: "添加/修改地址成功",
            type: "success"
          });
          this.getAllAddressData();
        } else {
          this.$message.error("添加购物车失败");
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 删除 - 收货地址
    async postDeleteAddressData(id) {
      const res = await postDeleteAddressData(id);
      try {
        if (res.code === 200) {
          this.getAllAddressData();
          this.$message({
            message: "删除地址成功",
            type: "success"
          });
        } else {
          this.$message.error("删除地址失败");
        }
      } catch (err) {
        console.log(err);
      }
    }
  },
  filters: {
    isDefaultFilters(val) {
      let obj = {
        "1"() {
          return "是";
        },
        "0"() {
          return "否";
        }
      };
      return (val && obj[val]()) || "-";
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/userCenter/address.scss";
</style>
